.nes-octocat {
  $px: 6px;
  $octocat-colors: (#333, #ffdec4, #cb7066);
  // prettier-ignore
  $octocat-1: (
    (0,0,0,1,0,0,0,0,0,0,0,0,1,0),
    (0,0,0,1,1,0,0,0,0,0,0,1,1,0),
    (0,0,0,1,1,1,1,1,1,1,1,1,1,0),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,2,2,2,2,2,2,1,1,1),
    (0,0,1,1,2,3,2,2,2,2,3,2,1,1),
    (0,0,1,1,2,3,2,2,2,2,3,2,1,1),
    (0,0,0,1,1,2,2,3,3,2,2,1,1,0),
    (1,1,0,0,0,0,1,1,1,1,0,0,0,0),
    (0,0,1,1,0,1,1,1,1,1,1,0,0,0),
    (0,0,0,1,1,1,1,1,1,1,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
  );
  // prettier-ignore
  $octocat-2: (
    (0,0,0,1,0,0,0,0,0,0,0,0,1,0),
    (0,0,0,1,1,0,0,0,0,0,0,1,1,0),
    (0,0,0,1,1,1,1,1,1,1,1,1,1,0),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,2,2,2,2,2,2,1,1,1),
    (0,0,1,1,2,2,2,2,2,2,2,2,1,1),
    (0,1,1,1,2,3,2,2,2,2,3,2,1,1),
    (0,1,0,1,1,2,2,3,3,2,2,1,1,0),
    (0,0,1,0,0,0,1,1,1,1,0,0,0,0),
    (0,0,0,1,0,1,1,1,1,1,1,0,0,0),
    (0,0,0,1,1,1,1,1,1,1,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
  );

  position: relative;
  display: inline-block;
  width: $px * 14;
  height: $px * 15;

  &::before {
    position: absolute;
    top: $px * -1;
    left: $px * -1;
    content: "";
    background: transparent;

    @include pixelize($octocat-1, $octocat-colors, $px);
  }

  &.animate::before {
    animation: wave 0.5s infinite steps(1);
  }

  @keyframes wave {
    0% {
      @include pixelize($octocat-1, $octocat-colors, $px);
    }
    50% {
      @include pixelize($octocat-2, $octocat-colors, $px);
    }
  }
}
